<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">

<head>
      {ms:include filename=headFile.htm/} 
</head>

<body>
{ms:include filename=head.htm/} 
<div id="appCtrl" v-loack>
    <div class="container product-detail clearfix">
        <div class="product-img">
            <img src="{ms:field.litpic/}" alt="" width="350" height="300" />
        </div>
        <div class="product-info clearfix">
            <h2 class="title">{ms:field.title/}</h2>
            <div class="choose-attrs">
                <dl class="clearfix">
                    <dt>保　　额：</dt>
                    <dd>
                        <a 
                        href="javascript:;" 
                        v-for="(el,index) in product"
                        :key="index"
                        @click="amountIndex=index" 
                        :class="{on:amountIndex === index}">
                            {{el.amount/10000}} 万
                        </a>
                    </dd>
                </dl>
                <dl class="clearfix">
                    <dt>保障期限：</dt>
                    <dd>一年</dd>
                </dl>
                <dl class="clearfix">
                    <dt>年　　龄：</dt>
                    <dd>
                        <a 
                        v-for="(el,index) in product[amountIndex].age"
                        :key="index"
                        @click="ageIndex=index"
                        href="javascript:;"
                        :class="{on:ageIndex === index}">
                        {{el.scope}}</a>
                    </dd>
                </dl>
                <dl class="clearfix">
                    <dt>价　　格：</dt>
                    <dd>
                        <p class="product-info-price">
                            {{product[amountIndex].age[ageIndex].price}} <sub class="cGray">元/年</sub>
                        </p>
                    </dd>
                </dl>
            </div>
            <div class="choose-attrs-submit">
                <a href="{ms:global.host/}/writingPolicy.do">立即购买</a> 
                <span class="cGray"> <span class="cGold"></span></span>
            </div>
        </div>
    </div>
    <div class="container product-article">
        <div class="product-tab-wrapper" id="stickyNav">
             <div class="product-tab">
                <ul>
                    <li class="on">产品详情</li>
                    <li>购买须知</li>
                    <li>常见问题</li>
                </ul>
            </div>            
        </div>

        <div class="tab-contents">
			 {ms:field.content/}
		</div>
		<div class="tab-contents">
			购买须知html
		</div>
		<div class="tab-contents">
			常见问题html
		</div>
    </div>
</div>
{ms:include filename=foot.htm/} 
    <script>
        var vmodel = new Vue({
            el: '#appCtrl',
            data: function(){
                return {
                    amountIndex:0,
                    ageIndex:0,
                    product:[{
                        id:1000001,
                        amount:20000,
                        age:[{
                            scope: '45-49',
                            price: 400
                        },{
                            scope: '50-54',
                            price: 500
                        },{
                            scope: '55-59',
                            price: 600
                        }]
                    },{
                        id:1000002,
                        amount:10000,
                        age:[{
                            scope: '45-49',
                            price: 301
                        },{
                            scope: '50-54',
                            price: 401
                        },{
                            scope: '55-59',
                            price: 501
                        },{
                            scope: '60-64',
                            price: 601
                        }]
                    }]
                }
            },

            watch:{
                amountIndex: function(val){
                    var size = this.product[val].age.length-1;
                    if(this.ageIndex>size){
                        this.ageIndex = size;
                    }
                }
            },

            methods:{
                submit: function(){
                    var amount = vmodel.product[vmodel.amountIndex].amount;

                    var scope = vmodel.product[vmodel.amountIndex].age[vmodel.ageIndex].scope;

                    var id = vmodel.product[vmodel.amountIndex].id;

                    var price = vmodel.product[vmodel.amountIndex].age[vmodel.ageIndex].price;

                    location.href = 'writing_policy.html?amount='+ amount +'&scope='+scope+'&price='+price+'&id='+id;
                }
            },

            mounted: function(){
                var $window = $(window),
                    stickyNav = $('#stickyNav');
                $window.on('scroll', function(){
                    if($window.scrollTop() > stickyNav.offset().top){
                        stickyNav.addClass('fixed');
                    }else{
                        stickyNav.removeClass('fixed')
                    }
                })
            },

            mounted: function(){
                var $window = $(window),
                    stickyNav = $('#stickyNav'),
                    contents = $('.tab-contents'),
                    len = contents.length;
                    var offsetTop = 80;
                $window.on('scroll', function(){
                    if($window.scrollTop() > stickyNav.offset().top){
                        stickyNav.addClass('fixed');
                    }else{
                        stickyNav.removeClass('fixed')
                    }

                    for(var i = 0; i < len; i++){
                        var curRect = contents[i].getBoundingClientRect();
                        if(Math.floor(curRect.top) <= offsetTop && Math.floor(curRect.bottom) > offsetTop) {
                            stickyNav.find('li').removeClass('on').eq(i).addClass('on');
                            break;
                        }
                    }

                })

                stickyNav.find('li').click(function(){
                    var index = $(this).index();
                    $('html,body').animate({
                        scrollTop: contents.eq(index).offset().top-80
                    }, 500)
                    
                })
            }
        })
    </script>
</body>

</html>